昨天介紹了SwiftUI，了解它的特色、基礎架構。

那今天要開始針對SwiftUI的Layout做介紹，看看畫面上的元素是如何排列與對齊的。

基本容器 (Stack)

SwiftUI 最常見的三種 Stack：

VStack（垂直排列）

把子元素進行垂直排列。

VStack {
    Text("上方文字")
	    .background(Color.yellow)
    Text("下方文字")
	    .background(Color.red)
}

HStack（水平排列）

把子元素進行左右排列。

HStack {
    Text("左方文字")
		  .background(Color.yellow)
    Text("右方文字")
       .background(Color.red)
}

ZStack（重疊排列）

把子元素堆疊在一起，像 Photoshop 的圖層。

ZStack {
     Circle()
        .fill(Color.yellow)
     Text("Hello, world!")
}

Spacer 與 Padding

在 Stack 中，Spacer 是一個「彈性空間」，可以把元素推開。

下例會把文字分別靠左、靠右。

HStack {
    Text("左方文字")
        .background(Color.yellow)
    Spacer()
    Text("右方文字")
        .background(Color.red)
}

而 padding() 則是讓元素周圍多一點空白。

HStack {
    Text("左方文字")
        .background(Color.yellow)
        .padding(50)
    Text("右方文字")
        .background(Color.red)
}

Alignment

在 Stack 中，我們可以透過 Alignment 設定元素的對齊方式。

HorizontalAlignment

預設是 置中對齊，但可以改成靠左（leading）、靠右（trailing）。

VStack(alignment: .leading) {
    Text("上方文字")
        .background(Color.yellow)
    Text("下方文字123456789")
        .background(Color.red)
}

除了上面的leading以外，根據官方範例可以設定以下三種對齊方式

• Leading：靠左對齊
• Center：置中對齊（預設）
• Trailing：靠右對齊

VerticalAlignment

同樣地，HStack 可以設定垂直對齊方式：

HStack(alignment:.bottom ) {
    Text("上方文字")
        .background(Color.yellow)
    Text("下方文字\n123456789")
        .background(Color.red)
}

根據官方範例有以下對齊方式

• Top：靠上
• Center：置中
• Bottom：靠下
• firstTextBaseline：文字的第一行基準線對齊
• lastTextBaseline：文字的最後一行基準線對齊

Frame

如果想要強制設定元素的大小，可以使用 frame：

VStack {
    Text("固定大小")
        .frame(width: 200, height: 100)
        .background(Color.yellow)
    Text("最大寬度")
        .frame(maxWidth: .infinity)
        .background(Color.red)
}

Grid

從 iOS 16 開始，SwiftUI 引入了 Grid，可以更直覺地建立表格或網格排版。

Grid {
    GridRow {
        Text("A1")
            .background(Color.yellow)
        Text("B1")
            .background(Color.red)
        }
    GridRow {
        Text("A2")
            .background(Color.blue)
        Text("B2")
            .background(Color.green)
        }
}

今日小結

SwiftUI 的 Layout 系統 重點在於：

• 使用 Stack (VStack / HStack / ZStack) 進行基本排列。
• 用 Spacer 和 Padding 控制間距。
• 透過 Alignment 與 Frame 精準調整。
• 遇到進階需求時，可以用 Grid。